<template>
<div id="caipiao">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<div class="tab">
			<a @tap="actTab=1" :style="actTab==1?'color:#a53906':''">选号投注</a>
			<a @tap="actTab=2" :style="actTab==2?'color:#a53906':''">历史开奖</a>
		</div>
		<div class="mui-icon mui-icon-help mui-icon-right-nav" @tap="showHelp"></div>
	</header>
	<div class="mui-content">
		<!-- 路由 -->
		<router-view v-if="actTab==1"/>
		<!-- 记录 -->
		<record v-if="actTab==2"/>
	</div>
</div>
</template>

<script>
import record from "@/components/record"
export default {
  name: 'caipiao',
  components:{
  	  record,
  },
  data(){
	  return{
		actTab:1
	  }
  },
  methods:{
	  showHelp(){
		  mui.alert(this.caipiaoHelp)
	  }
  }
}
</script>

<style scoped>
.mui-content{background:#efeff4}
header.header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}
.mui-bar-nav.mui-bar .mui-icon {
    margin-left: 0;
	margin-right: 0;
}
header.header>.mui-icon-right-nav{
	color: #fff;
	
}
header.header>.tab{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
header.header>.tab>a{
	padding: 0 15px;
	border: 1px solid #fff;
	line-height: 28px;
	color: #fff;
	font-size: 16px;
}
header.header>.tab>a:first-child{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
header.header>.tab>a:last-child{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-left: 0;
}
</style>
